<script setup lang="ts" name="ResourceLibrary">
import usePublic from './hooks/usePublic'
import useFolderFilter from './hooks/useFolderFilter'
import useFolderClick from './hooks/useFolderClick'
import useInlineRename from './hooks/useInlineRename'
import useSelect from './hooks/useSelect'
import useListeningFolderAdd from './hooks/useListeningFolderAdd'
import useListeningFolderMove from './hooks/useListeningFolderMove'
import useListeningFolderRename from './hooks/useListeningFolderRename'
import useListeningUploadSource from './hooks/useListeningUploadSource'
import useListeningEditImage from './hooks/useListeningEditImage'
import useListeningEditOtherSource from './hooks/useListeningEditOtherSource'
import useListeningEditVideo from './hooks/useListeningEditVideo'
import useClipboard from './hooks/useClipboard'
import useRecycle from './hooks/useRecycle'
import useRecycleOperate from './hooks/useRecycleOperate'
import useChooseResource from './hooks/useChooseResource'
import useDelete from './hooks/useDelete'

import EditImage from './components/EditImage.vue'
import EditOtherSource from './components/EditOtherSource.vue'
import EditVideo from './components/EditVideo.vue'
import FolderAdd from './components/FolderAdd.vue'
import FolderMove from './components/FolderMove.vue'
import FolderRename from './components/FolderRename.vue'
import UploadResource from './components/UploadResource.vue'

// 增加事务监听
const emit = defineEmits(['select'])
// 弹窗打开重新请求数据
const props = defineProps({
  show: { type: Boolean }
})
const scrollRef: any = ref(null)
// 声明DOM相关变量
const treeRef = ref(null) // 树结构
const FolderAddRef = ref(null) // 新建文件夹弹窗
const FolderRenameRef = ref(null) // 文件夹重命名弹窗
const FolderMoveRef = ref(null) // 资源|文件夹移动弹窗
const uploadSourceRef = ref(null) // 上传资源弹窗
const EditImageRef = ref(null) // 编辑图片弹窗
const EditVideoRef = ref(null) // 编辑视频弹窗
const EditOtherSourceRef = ref(null) // 编辑其他资源弹窗


// 资源库公共逻辑部分
const { initInfo, getFolderList, getSourceList, initFolder, resetSelectedInfo, cardListChangeHandler, setUploadParams, checkUseCondition, changePopShowStatus } = usePublic(treeRef)

// 文件夹点击事件 （树结构的点击、右键点击、列表的双击、表格单元格的双击）
const { treeNodeClick, treeNodeRightClick, cellDblclickHandler, dblClickRow } = useFolderClick(initInfo, treeRef, getSourceList, resetSelectedInfo, emit)

// 文件夹树结构过滤查询
const { filterTreeList, filterTreeNodeHandler } = useFolderFilter(initInfo, treeRef)

// 资源|文件夹行内重命名
const { setTitleInputRef, titleEdit, titleSave } = useInlineRename(initInfo, initFolder)

// 资源|文件夹选中
const { selectedRow, checkedAllHandler, cellClickHandler } = useSelect(initInfo)

// 资源复制
const { copyLink, copyLinkMenuClick, copyHtml, copyHtmlMenuClick } = useClipboard(initInfo)

// 资源删除
const { deleteSingleResource, folderDeleteRightClick, deleteSingleResourceMenuClick, deleteMultipleResourceMenuClick, folderDeleteOperateClick } = useDelete(initInfo, initFolder)

// 跳转回收站
const { toRecycle, getRecycleSource, recycleSizeChange, recycleCurrentChange } = useRecycle(initInfo, treeRef, resetSelectedInfo)

// 回收站操作事件 （还原|彻底删除）
const { returnSourceOperateClick, realDeleteSourceOperateClick, returnSourceMenuClick, realDeleteSourceMenuClick } = useRecycleOperate(initInfo, getRecycleSource)

// 新建文件夹弹窗
const { showFolderAddDialog, newFolderAdd, folderAddRightClick, folderAddDialogClose, updateFolderChecked } = useListeningFolderAdd(initInfo, treeRef, FolderAddRef, uploadSourceRef, initFolder)

// 文件夹重命名
const { showFolderRenameDialog, folderRenameRightClick, folderRenameMenuClick, folderRenameDialogClose } = useListeningFolderRename(initInfo, FolderRenameRef)

// 资源|文件夹移动
const { showFolderMoveDialog, resourceMoveRightClick, resourceMoveMenuClick, folderMoveDialogClose } = useListeningFolderMove(initInfo, FolderMoveRef)

// 图片编辑
const { showEditImageDialog } = useListeningEditImage(EditImageRef)

// 视频编辑
const { showEditVideoDialog } = useListeningEditVideo(EditVideoRef)

// 编辑其他资源
const { showEditOtherSourceDialog } = useListeningEditOtherSource(EditOtherSourceRef)

// 上传资源
const { uploadCurrentFolder, updateFolder, uploadSourceShowFolderAdd, uploadDialogClose } = useListeningUploadSource(initInfo, uploadSourceRef, initFolder, showFolderAddDialog)

// 作为选择资源的弹窗时的相关逻辑
const { getActiveResource, getChooseConfig } = useChooseResource(initInfo, emit)

// 向父级暴露方法
defineExpose({ getActiveResource, getChooseConfig })

// 资源编辑弹窗判断
const showEditDialog = (v) => {
  if (v.fileType === 'image') {
    showEditImageDialog(v)
  } else if (v.fileType === 'video') {
    showEditVideoDialog(v)
  } else {
    showEditOtherSourceDialog(v)
  }
}

onMounted(() => {
  setUploadParams()
  getFolderList()
})

watch(
  () => props.show,
  () => {
    console.log(props.show, '弹窗展示或隐藏')
    changePopShowStatus(props.show)
    if (props.show) {
      getFolderList()
      nextTick(() => {
        if (scrollRef.value) {
          scrollRef.value.wrapRef.scrollTop = 0
        }
      })
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<template>
  <div class="resource-library">
    <el-container>
      <el-aside width="240px" class="flex flex-col">
        <el-card shadow="hover" class="flex flex-1 flex-col">
          <template #header>
            <div class="card-header">
              <el-input v-model="initInfo.folderName" placeholder="文件夹名称" clearable @input="filterTreeList" />
            </div>
          </template>
          <div class="folder-list flex-1">
            <el-scrollbar>
              <el-tree
                ref="treeRef"
                class="tree-level"
                :data="initInfo.folderList"
                :props="{ label: 'title' }"
                node-key="id"
                :filter-node-method="filterTreeNodeHandler"
                auto-expand-parent
                :expand-on-click-node="false"
                :check-on-click-node="true"
                :default-expanded-keys="initInfo.defaultExpandNodes"
                check-strictly
                @node-click="treeNodeClick">
                <template #default="{ node, data }">
                  <span v-if="initInfo.isChooseResource" class="item-tree-node">
                    <span>{{ node.label }}</span>
                    <template v-for="item in data.level">
                      <span v-if="!data.hideLine.includes(item)" :key="item.value" :class="['item-tree-node-line-vertical', data.isLast && item == data.level ? 'is-last' : '', data.isFirst && data.level === 1 ? 'is-first' : '']" :style="{ left: 18 * (item - 1) + 12 + 'px' }" />
                    </template>
                    <span class="item-tree-node-line-horizontal" :style="{ left: 18 * (data.level - 1) + 12 + 'px' }" />
                  </span>
                  <span v-else v-contextmenu:contextmenu class="item-tree-node" @click.right="treeNodeRightClick(node)">
                    <span>{{ node.label }}</span>
                    <template v-for="item in data.level">
                      <span v-if="!data.hideLine.includes(item)" :key="item.value" :class="['item-tree-node-line-vertical', data.isLast && item == data.level ? 'is-last' : '', data.isFirst && data.level === 1 ? 'is-first' : '']" :style="{ left: 18 * (item - 1) + 12 + 'px' }" />
                    </template>
                    <span class="item-tree-node-line-horizontal" :style="{ left: 18 * (data.level - 1) + 12 + 'px' }" />
                  </span>
                </template>
              </el-tree>
            </el-scrollbar>
          </div>
          <v-contextmenu ref="contextmenu">
            <v-contextmenu-item @click="folderAddRightClick">新建文件夹</v-contextmenu-item>
            <v-contextmenu-item v-if="initInfo.rightClickFolder" @click="folderDeleteRightClick(0)">删除未引用文件</v-contextmenu-item>
            <v-contextmenu-item v-if="initInfo.rightClickFolder && initInfo.rightClickFolder?.id !== 0" @click="folderDeleteRightClick(1)">删除文件夹</v-contextmenu-item>
            <v-contextmenu-item v-if="initInfo.rightClickFolder && initInfo.rightClickFolder?.id !== 0" @click="folderDeleteRightClick(2)">强制删除文件及文件夹</v-contextmenu-item>
            <v-contextmenu-item v-if="initInfo.rightClickFolder && initInfo.rightClickFolder?.id !== 0" @click="folderRenameRightClick">重命名</v-contextmenu-item>
            <v-contextmenu-item v-if="initInfo.rightClickFolder && initInfo.rightClickFolder?.id !== 0" @click="resourceMoveRightClick">移动到</v-contextmenu-item>
          </v-contextmenu>
          <div v-if="!initInfo.isChooseResource" class="btn-recycle" @click="newFolderAdd">
            <el-icon>
              <Plus />
            </el-icon>
          </div>
          <div v-if="!initInfo.isChooseResource" :class="['btn-recycle', initInfo.isRecycle ? 'active' : '']" @click="toRecycle">
            <el-icon>
              <Delete />
            </el-icon>
            <span>回收站</span>
          </div>
        </el-card>
      </el-aside>
      <el-container>
        <el-card shadow="hover" class="flex flex-1">
          <div class="source-header">
            <div class="search-button-pane">
              <div class="layout-type">
                <svg-icon :class="[initInfo.isCard ? 'active' : '', initInfo.isRecycle ? 'disabled' : '']" icon="ri:function-line" @click="cardListChangeHandler(true)" />
                <svg-icon :class="!initInfo.isCard ? 'active' : ''" icon="ri:align-justify" @click="cardListChangeHandler(false)" />
              </div>
              <div class="sort-search flex flex-1">
                <!-- <el-popover placement="bottom-start" trigger="hover">
                  <template #reference>
                    <svg-icon icon="ri:sort-desc"></svg-icon>
                  </template>
                  <div class="sort-type">
                    <div v-for="item in initInfo.sortTypeList" :key="item.value" :class="['item-sort', item.active?'active':'']" @click="changeSortType(item)">
                      <svg-icon v-if="item.active" icon="ep:check"></svg-icon>
                      {{ item.label }}
                    </div>
                  </div>
                </el-popover> -->
                <el-form :inline="true">
                  <el-form-item v-if="!initInfo.isRecycle">
                    <el-select v-model="initInfo.form.type" class="file-type" clearable style="width: 80px;" :disabled="initInfo.isChooseResource && initInfo.form.type !== ''" placeholder="类型" @change="getSourceList">
                      <el-option v-for="item in initInfo.fileTypeList" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-input v-if="initInfo.isRecycle" v-model="initInfo.recycleInfo.form.search" clearable placeholder="模糊搜索标题、描述" @change="getRecycleSource" />
                    <el-input v-else v-model="initInfo.form.search" clearable placeholder="模糊搜索标题、描述" @change="getSourceList" />
                  </el-form-item>
                </el-form>
              </div>
              <div class="operate-button">
                <el-button v-if="!initInfo.isChooseResource" icon="Refresh" @click="checkUseCondition">更新引用</el-button>
                <el-button @click="uploadCurrentFolder">
                  <svg-icon icon="ri:upload-cloud-line" />
                  上传
                </el-button>
                <el-button v-if="!initInfo.isChooseResource" icon="Plus" @click="newFolderAdd">新建文件夹</el-button>
              </div>
            </div>
            <div :class="['breadcrumb-operate', initInfo.isRecycle ? 'is-recycle' : '']">
              <div class="breadcrumb-pane">
                <el-breadcrumb separator="/">
                  <template v-for="(item, index) in initInfo.breadcrumbList" :key="index">
                    <el-breadcrumb-item v-if="index < initInfo.breadcrumbList.length - 1" @click="treeNodeClick(item)">{{ item.title }}</el-breadcrumb-item>
                    <el-breadcrumb-item v-else class="is-leaf">{{ item.title }}</el-breadcrumb-item>
                  </template>
                </el-breadcrumb>
              </div>
              <div v-if="!initInfo.isChooseResource" class="operate-pane">
                <el-checkbox v-model="initInfo.selectedInfo.allChecked" :indeterminate="initInfo.selectedInfo.isIndeterminate" :disabled="initInfo.sourceList.length === 0" @change="checkedAllHandler">{{
                initInfo.selectedInfo.checkedTitle }}</el-checkbox>
                <template v-if="initInfo.isRecycle">
                  <div v-if="initInfo.selectedInfo.sourceCount !== 0" class="edit-button">
                    <div class="item-edit" @click="returnSourceMenuClick">还原</div>
                    <i class="spacer">|</i>
                    <div class="item-edit" @click="realDeleteSourceMenuClick">彻底删除</div>
                  </div>
                </template>
                <template v-else>
                  <div v-if="initInfo.selectedInfo.folderCount !== 0 || initInfo.selectedInfo.sourceCount !== 0" class="edit-button">
                    <template v-if="initInfo.selectedInfo.folderCount === 0 && initInfo.selectedInfo.sourceCount === 1">
                      <div class="item-edit" @click="showEditDialog(initInfo.selectedInfo.activeSingleSource)">编辑</div>
                      <i class="spacer">|</i>
                      <el-popover placement="bottom-start" :width="80" trigger="hover">
                        <template #reference>
                          <div class="item-edit">
                            复制
                            <el-icon>
                              <ArrowDown />
                            </el-icon>
                          </div>
                        </template>
                        <div class="delete-type">
                          <div class="item-delete" @click="copyLinkMenuClick()">复制链接</div>
                          <div class="item-delete" @click="copyHtmlMenuClick()">复制代码</div>
                        </div>
                      </el-popover>
                      <i class="spacer">|</i>
                    </template>
                    <template v-if="initInfo.selectedInfo.folderCount === 1 && initInfo.selectedInfo.sourceCount === 0">
                      <div class="item-edit" @click="folderRenameMenuClick">重命名</div>
                      <i class="spacer">|</i>
                    </template>
                    <div
                      v-if="initInfo.selectedInfo.folderCount === 0 && initInfo.selectedInfo.sourceCount === 1 || initInfo.selectedInfo.folderCount === 0 && initInfo.selectedInfo.sourceCount > 1 && initInfo.selectedInfo.usedCheckedCount === 0"
                      class="item-edit"
                      @click="deleteSingleResourceMenuClick">
                      删除
                    </div>
                    <el-popover v-else placement="bottom-start" :width="170" trigger="hover">
                      <template #reference>
                        <div class="item-edit">
                          删除
                          <el-icon>
                            <ArrowDown />
                          </el-icon>
                        </div>
                      </template>
                      <div class="delete-type">
                        <div v-if="initInfo.selectedInfo.folderCount > 0 || initInfo.selectedInfo.folderCount === 0 && initInfo.selectedInfo.sourceCount !== initInfo.selectedInfo.usedCheckedCount" class="item-delete" @click="deleteMultipleResourceMenuClick(0)">删除未引用文件</div>
                        <div v-if="initInfo.selectedInfo.folderCount > 0 && initInfo.selectedInfo.sourceCount === 0" class="item-delete" @click="deleteMultipleResourceMenuClick(1)">删除文件夹</div>
                        <div v-if="initInfo.selectedInfo.folderCount > 0" class="item-delete" @click="deleteMultipleResourceMenuClick(2)">强制删除文件及文件夹</div>
                      </div>
                    </el-popover>
                    <i class="spacer">|</i>
                    <div class="item-edit" @click="resourceMoveMenuClick">移动到</div>
                    <!-- <i class="spacer">|</i>
                    <div class="item-edit">查看引用</div> -->
                  </div>
                </template>
              </div>
            </div>
          </div>
          <div :class="['source-body', !initInfo.isCard && !initInfo.isRecycle ? 'is-card-table' : '', initInfo.recycleInfo.total === 0 && initInfo.isRecycle ? 'is-recycle-table' : '']">
            <template v-if="!initInfo.isRecycle">
              <template v-if="initInfo.isCard">
                <el-scrollbar v-if="initInfo.sourceList.length > 0" ref="scrollRef">
                  <div v-for="(item, index) in initInfo.sourceList" :key="index" :class="['item-source', item.active ? 'active' : '']">
                    <div class="folder-image" @click.stop="selectedRow(item)" @dblclick.stop="dblClickRow(item)">
                      <div v-if="!initInfo.isChooseResource || initInfo.isChooseResource && !item.isFolder" class="item-checkbox"><svg-icon v-if="item.active" icon="ep:check" /></div>
                      <div v-if="!item.isFolder && item.position > 0" class="item-used">引</div>
                      <svg-icon v-if="item.isFolder" icon="ci:folder" size="72" />
                      <template v-else>
                        <!-- <div v-if="item.fileType === 'image'" class="el-image">
                          <img :src="item.url" fit="fill" alt="" crossOrigin="anonymous" />
                        </div> -->
                        <el-image v-if="item.fileType === 'image'" :src="item.url" fit="fill" lazy />
                        <svg-icon v-else-if="item.fileType === 'video'" icon="ci:filetype-video" size="64" />
                        <svg-icon v-else-if="item.fileType === 'audio'" icon="ci:filetype-audio" size="64" />
                        <template v-else>
                          <svg-icon v-if="initInfo.fileTypeArr.includes(item.type)" :icon="'ci:filetype-' + item.type" size="64" />
                          <svg-icon v-else icon="ci:filetype-unknown" size="64" />
                        </template>
                      </template>
                      <div v-if="!item.isFolder" class="item-operate">
                        <svg-icon v-if="!initInfo.isChooseResource && !item.isFolder" icon="ri:edit-box-line" title="编辑" @click.stop="showEditDialog(item)" />
                        <svg-icon icon="ri:link-m" title="复制链接" @click.stop="copyLink(item.url)" />
                        <svg-icon icon="ri:file-code-line" title="复制代码" @click.stop="copyHtml(item)" />
                        <svg-icon v-if="!initInfo.isChooseResource" icon="ri:delete-bin-6-line" title="删除" @click.stop="deleteSingleResource(item)" />
                      </div>
                      <div v-if="!item.isFolder && !item.active && (item.fileType === 'image' || item.fileType === 'video') && item.imagewidth !== 0 && item.imageheight !== 0" class="item-size">{{ item.imagewidth }}x{{ item.imageheight }}</div>
                      <span v-if="!item.isFolder && !item.active" class="file-byte">{{ item.fileSize }}</span>
                    </div>
                    <div v-if="!initInfo.isChooseResource" class="source-name" :title="item.title">
                      <span v-if="!item.isTitleEdit" @click="titleEdit(item)">{{ item.title }}</span>
                      <el-input v-else :ref="setTitleInputRef" v-model="item.title" clearable :maxlength="item.isFolder ? 20 : 50" @blur="titleSave(item)" />
                    </div>
                    <div v-else class="source-name" :title="item.title">
                      <span>{{ item.title }}</span>
                    </div>
                  </div>
                  <div class="item-upload-file" @click="uploadCurrentFolder">
                    <div class="item-file">
                      <svg-icon icon="ep:plus" />
                    </div>
                    <div class="source-name"><span>上传文件</span></div>
                  </div>
                </el-scrollbar>
                <el-empty v-else>
                  <template #description>
                    <p>这里空空如也，快来上传吧~</p>
                  </template>
                  <template #default>
                    <el-button type="primary" @click="uploadCurrentFolder">上传文件</el-button>
                  </template>
                </el-empty>
              </template>
              <div v-else class="abs-table">
                <el-table :data="initInfo.sourceList" border @cell-click="cellClickHandler" @cell-dblclick="cellDblclickHandler">
                  <el-table-column width="44">
                    <template #default="scope">
                      <div :class="['item-checkbox', scope.row.active ? 'active' : '', initInfo.isChooseResource && scope.row.isFolder ? 'disabled' : '']">
                        <svg-icon v-if="scope.row.active" icon="ep:check" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="url" label="文件" width="90" align="center">
                    <template #default="scope">
                      <div :class="['image-wrap', scope.row.isFolder ? 'folder' : '']">
                        <svg-icon v-if="scope.row.isFolder" icon="ci:folder" size="32" />
                        <template v-else>
                          <el-image v-if="scope.row.fileType === 'image'" :src="scope.row.url" fit="fill" lazy />
                          <svg-icon v-else-if="scope.row.fileType === 'video'" icon="ci:filetype-video" size="32" />
                          <svg-icon v-else-if="scope.row.fileType === 'audio'" icon="ci:filetype-audio" size="32" />
                          <template v-else>
                            <svg-icon v-if="initInfo.fileTypeArr.includes(scope.row.type)" :icon="'ci:filetype-' + scope.row.type" size="32" />
                            <svg-icon v-else icon="ci:filetype-unknown" size="32" />
                          </template>
                        </template>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="名称">
                    <template #default="scope">
                      <template v-if="initInfo.isChooseResource">
                        <div class="td-p">{{ scope.row.title }}</div>
                      </template>
                      <template v-else>
                        <div v-if="!scope.row.isTitleEdit" class="td-p" @click.stop="titleEdit(scope.row)">
                          {{
                scope.row.title }}
                        </div>
                        <el-input v-else :ref="setTitleInputRef" v-model="scope.row.title" clearable :maxlength="scope.row.isFolder ? 20 : 50" @blur="titleSave(scope.row)" />
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="描述">
                    <template #default="scope">
                      <div v-if="scope.row.isFolder" class="td-p">--</div>
                      <div v-else class="td-p">{{ scope.row.description }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="filesize" label="大小" sortable align="right" width="120">
                    <template #default="scope">
                      <div v-if="scope.row.isFolder" class="td-p">--</div>
                      <div v-else class="td-p">{{ scope.row.fileSize }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="description" label="尺寸" align="center" width="120">
                    <template #default="scope">
                      <div v-if="!scope.row.isFolder && (scope.row.fileType === 'image' || scope.row.fileType === 'video')" class="td-p">{{ scope.row.imagewidth }}x{{ scope.row.imageheight }}</div>
                      <div v-else class="td-p">--</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="create_time" label="上传时间" width="170" sortable align="center" />
                  <el-table-column prop="position" label="是否引用" width="110" align="center" sortable>
                    <template #default="scope">
                      <div v-if="scope.row.isFolder" class="td-p">--</div>
                      <el-tag v-else :type="scope.row.position > 0 ? 'success' : 'info'">{{ scope.row.position > 0 ?
                '已引用' : '未引用' }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="operate" label="操作" width="100" align="center">
                    <template #default="scope">
                      <el-popover v-if="!initInfo.isChooseResource || initInfo.isChooseResource && !scope.row.isFolder" placement="bottom-start" :width="scope.row.isFolder ? 170 : 80" trigger="hover">
                        <template #reference>
                          <div class="operate-popover">...</div>
                        </template>
                        <div class="operate-type">
                          <div v-if="!scope.row.isFolder" class="item-operate" @click="showEditDialog(scope.row)">编辑</div>
                          <div v-if="!scope.row.isFolder" class="item-operate" @click="copyLink(scope.row.url)">复制链接</div>
                          <div v-if="!scope.row.isFolder" class="item-operate" @click="copyHtml(scope.row)">复制代码</div>
                          <div v-if="!initInfo.isChooseResource && !scope.row.isFolder" class="item-operate" @click="deleteSingleResource(scope.row)">删除</div>
                          <div v-if="!initInfo.isChooseResource && scope.row.isFolder" class="item-operate" @click="folderDeleteOperateClick(scope.row, 0)">删除未引用文件</div>
                          <div v-if="!initInfo.isChooseResource && scope.row.isFolder" class="item-operate" @click="folderDeleteOperateClick(scope.row, 1)">删除文件夹</div>
                          <div v-if="!initInfo.isChooseResource && scope.row.isFolder" class="item-operate" @click="folderDeleteOperateClick(scope.row, 2)">强制删除文件及文件夹</div>
                          <div v-if="!initInfo.isChooseResource && scope.row.isFolder" class="item-operate" @click="showFolderRenameDialog(scope.row)">重命名</div>
                          <div v-if="!initInfo.isChooseResource" class="item-operate" @click="showFolderMoveDialog([scope.row])">移动到</div>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <template #empty>
                    <el-empty>
                      <template #description>
                        <p>这里空空如也，快来上传吧~</p>
                      </template>
                      <template #default>
                        <el-button type="primary" @click="uploadCurrentFolder">上传文件</el-button>
                      </template>
                    </el-empty>
                  </template>
                </el-table>
              </div>
            </template>
            <template v-else>
              <div class="table-wrap">
                <div class="abs-table">
                  <el-table :data="initInfo.sourceList" border @cell-click="cellClickHandler" @cell-dblclick="cellDblclickHandler">
                    <el-table-column width="44">
                      <template #default="scope">
                        <div :class="['item-checkbox', scope.row.active ? 'active' : '']"><svg-icon v-if="scope.row.active" icon="ep:check" /></div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="url" label="文件" width="90" align="center">
                      <template #default="scope">
                        <div :class="['image-wrap', scope.row.isFolder ? 'folder' : '']">
                          <svg-icon v-if="scope.row.isFolder" icon="ci:folder" size="32" />
                          <template v-else>
                            <el-image v-if="scope.row.fileType === 'image'" :src="scope.row.url" fit="fill" lazy />
                            <svg-icon v-else-if="scope.row.fileType === 'video'" icon="ci:filetype-video" size="32" />
                            <svg-icon v-else-if="scope.row.fileType === 'audio'" icon="ci:filetype-audio" size="32" />
                            <template v-else>
                              <svg-icon v-if="initInfo.fileTypeArr.includes(scope.row.type)" :icon="'ci:filetype-' + scope.row.type" size="32" />
                              <svg-icon v-else icon="ci:filetype-unknown" size="32" />
                            </template>
                          </template>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="title" label="名称">
                      <template #default="scope">
                        <div class="td-p">{{ scope.row.title }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="description" label="描述">
                      <template #default="scope">
                        <div class="td-p">{{ scope.row.description }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="filesize" label="大小" sortable align="right" width="120">
                      <template #default="scope">
                        <div v-if="scope.row.isFolder" class="td-p">--</div>
                        <div v-else class="td-p">{{ scope.row.fileSize }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="description" label="尺寸" align="center" width="120">
                      <template #default="scope">
                        <div v-if="!scope.row.isFolder && (scope.row.fileType === 'image' || scope.row.fileType === 'video')" class="td-p">{{ scope.row.imagewidth }}x{{ scope.row.imageheight }}</div>
                        <div v-else class="td-p">--</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="delete_time" label="删除时间" width="170" sortable align="center" />
                    <el-table-column prop="folder" label="原文件夹" width="170" sortable align="center">
                      <template #default="scope">
                        <div class="td-p">{{ scope.row.folder ? scope.row.folder.title : '全部' }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" width="140" align="center">
                      <template #default="scope">
                        <el-button type="primary" link @click="returnSourceOperateClick(scope.row)">还原</el-button>
                        <el-button type="primary" link @click="realDeleteSourceOperateClick(scope.row)">彻底删除</el-button>
                      </template>
                    </el-table-column>
                    <template #empty>
                      <el-empty>
                        <template #description>
                          <p>您的回收站为空</p>
                        </template>
                        <template #default>
                          <p>回收站为您保存7天内删除的文件，超时后系统将自动删除</p>
                        </template>
                      </el-empty>
                    </template>
                  </el-table>
                </div>
              </div>
              <el-pagination
                v-if="initInfo.recycleInfo.total > 0"
                v-model:currentPage="initInfo.recycleInfo.form.page"
                v-model:page-size="initInfo.recycleInfo.form.limit"
                :page-sizes="[20, 40, 80, 120]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="initInfo.recycleInfo.total"
                @size-change="recycleSizeChange"
                @current-change="recycleCurrentChange" />
            </template>
          </div>
        </el-card>
      </el-container>
    </el-container>
    <!-- 上传内容 -->
    <UploadResource ref="uploadSourceRef" :folderList="initInfo.folderList" :config="initInfo.uploadConfig" @save="updateFolder" @close="uploadDialogClose" @show="uploadSourceShowFolderAdd" />
    <!-- 添加文件夹 -->
    <FolderAdd ref="FolderAddRef" :folderList="initInfo.folderList" @save="updateFolderChecked" @close="folderAddDialogClose" />
    <!-- 文件夹重命名 -->
    <FolderRename ref="FolderRenameRef" @save="initFolder" @close="folderRenameDialogClose" />
    <!-- 文件移动 -->
    <FolderMove ref="FolderMoveRef" :folderList="initInfo.folderList" @save="initFolder" @close="folderMoveDialogClose" />
    <!-- 编辑图片 -->
    <EditImage ref="EditImageRef" @save="initFolder" />
    <!-- 编辑视频 -->
    <EditVideo ref="EditVideoRef" :config="initInfo.uploadConfig" @save="initFolder" />
    <!-- 编辑其他资源 -->
    <EditOtherSource ref="EditOtherSourceRef" @save="initFolder" />
  </div>
</template>

<style scoped lang="scss">
.resource-library {
  >.el-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--el-space);

    >.el-aside {
      margin-right: var(--el-space);
      overflow: inherit;

      .el-card {
        :deep(.el-card__header) {
          padding: calc(var(--el-space) - 5px);
        }

        :deep(.el-card__body) {
          position: relative;
          display: flex;
          flex: 1;
          flex-direction: column;
          padding: 0;

          .el-scrollbar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            .el-scrollbar__wrap {
              padding: calc(var(--el-space) / 2);
            }
          }
        }
      }
    }

    .el-container {
      .el-card {
        :deep(.el-card__body) {
          display: flex;
          flex: 1;
          flex-direction: column;
          padding: 0;
        }
      }
    }
  }
}

.folder-list {
  position: relative;
}

.btn-recycle {
  display: flex;
  padding: calc(var(--el-space) - 5px);
  cursor: pointer;
  border-top: 1px solid var(--el-card-border-color);
  align-items: center;
  justify-content: center;

  &:hover,
  &.active {
    color: var(--el-color-primary);
  }

  &.active {
    background-color: var(--el-color-primary-light-9);
  }

  .el-icon {
    margin-right: 6px;
  }
}

.source-header {
  padding: var(--el-space) var(--el-space) 0;

  .search-button-pane {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: var(--el-bg-color-page);

    .layout-type {
      position: relative;
      padding-right: 4px;
      margin-right: 8px;

      &::after {
        position: absolute;
        top: 6px;
        right: 0;
        bottom: 6px;
        display: block;
        width: 1px;
        background-color: var(--el-border-color);
        content: '';
      }

      .el-icon {
        width: 32px;
        height: 32px;
        margin-right: 6px;
        cursor: pointer;

        &.disabled {
          color: var(--el-text-color-disabled);
          cursor: not-allowed;
        }

        &.active {
          color: var(--el-color-primary);
        }

        :deep(.svg-icon) {
          font-size: 24px;
        }
      }
    }

    .sort-search {
      align-items: center;

      .el-icon {
        width: 32px;
        height: 32px;
        margin-right: 6px;
        cursor: pointer;

        :deep(.svg-icon) {
          font-size: 24px;
        }
      }
    }

    .el-form {
      flex: 1;
    }
  }

  .breadcrumb-operate {
    padding: 6px 0;

    &.is-recycle {
      display: flex;

      .breadcrumb-pane {
        padding-right: 11px;
        margin-right: 10px;

        &::after {
          position: absolute;
          top: 10px;
          right: 0;
          bottom: 10px;
          display: block;
          width: 1px;
          background-color: var(--el-border-color);
          content: '';
        }
      }
    }
  }

  .breadcrumb-pane {
    position: relative;
    padding: 0;

    .el-breadcrumb {
      overflow: hidden;
      line-height: 32px;

      .el-breadcrumb__item {
        :deep(.el-breadcrumb__inner) {
          color: var(--el-color-primary);
          cursor: pointer;
        }

        &:last-child {
          :deep(.el-breadcrumb__inner) {
            color: var(--el-text-color-regular);
            cursor: text;
          }
        }
      }
    }
  }

  .operate-pane {
    display: flex;
    align-items: center;

    :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
      color: var(--el-text-color-regular);
    }

    .edit-button {
      display: flex;
      align-items: center;
      height: 24px;
      margin-left: 10px;
      border: 1px solid var(--el-border-color);
      border-radius: var(--el-border-radius-base);

      .item-edit {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 22px;
        padding: 0 20px;
        line-height: 22px;
        cursor: pointer;

        .el-icon {
          margin-left: 3px;
        }
      }

      .spacer {
        display: inline-block;
        height: 22px;
        font-style: normal;
        line-height: 22px;
        color: var(--el-border-color);
      }
    }
  }
}

.sort-type {
  margin: 0 -12px;

  .item-sort {
    position: relative;
    height: 32px;
    padding-left: 32px;
    line-height: 32px;
    cursor: pointer;

    &:hover {
      background-color: var(--el-fill-color-light);
    }

    &.active {
      font-weight: bold;
      color: var(--el-color-primary);
    }

    .el-icon {
      position: absolute;
      left: 10px;
      height: 32px;

      :deep(.svg-icon) {
        font-size: 20px;
      }
    }
  }
}

.source-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;

  .el-scrollbar {
    :deep(>.el-scrollbar__wrap) {
      >.el-scrollbar__view {
        overflow: hidden;
      }
    }
  }

  &.is-card-table,
  &.is-recycle-table {
    .abs-table {
      bottom: var(--el-space);
    }
  }

  .el-scrollbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    :deep(.el-scrollbar__wrap) {
      padding: 0 10px 10px;
      overflow-x: hidden;
    }
  }

  .table-wrap {
    position: relative;
    display: flex;
    flex: 1;
  }

  .el-pagination {
    justify-content: flex-end;
    padding: var(--el-space);
  }

  .abs-table {
    position: absolute;
    inset: 0 var(--el-space) 0 var(--el-space);

    .el-table {
      width: 100%;
      height: 100%;

      .item-checkbox {
        display: flex;
        width: 20px;
        height: 20px;
        cursor: pointer;
        background-color: var(--el-color-white);
        border: 1px solid var(--el-border-color);
        border-radius: 2px;
        align-items: center;
        justify-content: center;

        &.disabled {
          cursor: not-allowed;
          background-color: var(--el-fill-color-light);
          border: 1px solid var(--el-border-color);
        }

        &.active {
          background-color: var(--el-color-primary);
          border: 1px solid var(--el-color-primary);
        }

        .el-icon {
          font-size: 16px !important;
          color: var(--el-color-white);
        }
      }

      .image-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        border: 1px solid var(--el-border-color);

        .el-image {
          max-width: 40px;
          max-height: 40px;
        }

        &.folder {
          border: none;

          .el-image {
            max-width: 32px;
            max-height: 32px;
          }
        }
      }

      .operate-popover {
        display: flex;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        line-height: 30px;
        vertical-align: top;
        cursor: pointer;
        border: 1px solid var(--el-fill-color-blank);
        justify-content: center;
      }

      :deep(.el-scrollbar__view) {
        position: relative;
        min-height: 100%;

        .el-table__empty-block {
          position: absolute;

          .el-table__empty-text {
            line-height: 1.5;
          }
        }
      }
    }

    .el-table--enable-row-hover :deep(.el-table__body) {
      tr:hover>td.el-table__cell {
        .operate-popover {
          color: var(--el-color-primary);
          border: 1px solid var(--el-color-primary);
        }
      }
    }
  }
}

.item-source {
  float: left;
  width: 130px;
  margin: 10px;
  cursor: pointer;

  &.active {
    .folder-image {
      background-color: var(--el-color-primary-light-9);
      border: 1px solid var(--el-color-primary-light-5);

      .item-checkbox {
        top: 8px;
        left: 8px;
        background-color: var(--el-color-primary);
        border: 1px solid var(--el-color-primary);
      }
    }
  }

  .folder-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    overflow: hidden;
    background-color: var(--el-fill-color-light);
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);

    &:hover {
      background-color: var(--el-color-primary-light-9);
      border: 1px solid var(--el-color-primary-light-5);

      .item-checkbox {
        top: 8px;
        left: 8px;
      }

      .item-operate {
        bottom: 0;
      }

      .item-size {
        bottom: -22px;
      }

      .file-byte {
        top: -21px;
      }
    }

    .item-checkbox {
      position: absolute;
      top: -30px;
      left: -30px;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      background-color: var(--el-fill-color-light);
      border: 1px solid var(--el-border-color);
      border-radius: 2px;
      transition: all 0.5s;

      .el-icon {
        font-size: 16px !important;
        color: var(--el-color-white);
      }
    }

    .item-used {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      width: 48px;
      height: 48px;
      font-family: "Microsoft YaHei";
      line-height: 75px;
      color: #fff;
      text-align: center;
      cursor: pointer;
      background: rgba(0, 0, 0, 0.5);
      transform: rotate(45deg) translateY(-34px);
    }

    .item-operate {
      position: absolute;
      bottom: -26px;
      left: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 24px;
      background-color: rgba(0, 0, 0, 0.7);
      transition: bottom 0.5s;

      .el-icon {
        position: relative;
        font-size: 18px !important;
        color: var(--el-color-white);
        flex: 1;
      }

      .el-icon+.el-icon {
        &::before {
          position: absolute;
          top: 3px;
          bottom: 3px;
          left: 0;
          display: block;
          width: 1px;
          background-color: rgba(255, 255, 255, 0.2);
          content: '';
        }
      }
    }

    .item-size {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 10;
      display: flex;
      width: 100%;
      height: 21px;
      padding: 0 5px;
      overflow: hidden;
      font-size: 12px;
      line-height: 20px;
      color: var(--el-color-success);
      background-color: var(--el-color-success-light-9);
      border-top: 1px solid var(--el-border-color);
      transition: bottom 0.3s;
      align-items: center;
      justify-content: center;
    }

    .file-byte {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      height: 20px;
      padding: 0 5px;
      overflow: hidden;
      font-size: 12px;
      line-height: 18px;
      color: var(--el-color-info);
      background-color: var(--el-color-info-light-9);
      border-right: 1px solid var(--el-border-color);
      border-bottom: 1px solid var(--el-border-color);
      border-bottom-right-radius: var(--el-border-radius-base);
      transition: all 0.5s;
    }

    .el-image {
      max-width: 128px;
      max-height: 128px;

      :deep(.el-image__inner) {
        max-width: 128px;
        max-height: 128px;
      }
    }
  }

  .source-name {
    width: 100%;
    height: 32px;
    margin-top: 10px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-align: center;

    &:hover {
      span {
        background-color: var(--el-fill-color-light);
      }
    }

    span {
      display: inline-block;
      height: 32px;
      padding: 0 2px;
      font-size: var(--el-font-size-base);
      line-height: 32px;
      color: var(--el-text-color-primary);
    }
  }
}

.item-upload-file {
  float: left;
  width: 130px;
  margin: 10px;
  cursor: pointer;

  &:hover {
    .item-file {
      border-color: var(--el-color-primary);

      .el-icon {
        color: var(--el-color-primary);
      }
    }

    .source-name {
      span {
        color: var(--el-color-primary);
      }
    }
  }

  .item-file {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    overflow: hidden;
    border: 1px dashed var(--el-border-color);
    border-radius: var(--el-border-radius-base);

    .el-icon {
      font-size: 72px !important;
      color: var(--el-border-color);
    }
  }

  .source-name {
    width: 100%;
    height: 32px;
    margin-top: 10px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-align: center;

    span {
      display: inline-block;
      height: 32px;
      padding: 0 2px;
      font-size: var(--el-font-size-base);
      line-height: 32px;
      color: var(--el-text-color-primary);
    }
  }
}

.operate-button {
  .el-button {
    .el-icon {
      margin-right: 6px;
    }
  }
}

.delete-type {
  margin: 0 -12px;

  .item-delete {
    position: relative;
    height: 32px;
    padding: 0 12px;
    line-height: 32px;
    cursor: pointer;

    &:hover {
      background-color: var(--el-fill-color-light);
    }

    &.active {
      font-weight: bold;
      color: var(--el-color-primary);
    }
  }
}

.operate-type {
  margin: 0 -12px;

  .item-operate {
    position: relative;
    height: 32px;
    padding: 0 12px;
    line-height: 32px;
    cursor: pointer;

    &:hover {
      background-color: var(--el-fill-color-light);
    }
  }
}

.el-empty {
  flex: 1;
}
</style>
